<template>
	<div ref="echartsRef" class="echarts"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
const echartsRef = ref();
let annualData = [
	{
		label: new Date().getFullYear() - 2 + '年',
		value: ['184', '90', '120', '0', '30', '100', '80', '40', '20', '510', '350', '180'],
	},
	{
		label: new Date().getFullYear() - 1 + '年',
		value: ['118', '509', '366', '162', '380', '123', '321', '158', '352', '474', '154', '22'],
	},
	{
		label: new Date().getFullYear() + '年',
		value: ['548', '259', '113', '90', '69', '512', '23', '49', '28', '420', '313', '156'],
	},
];

const colors = ['#FFA600', '#007AFE', '#FF4B7A'];
const gradientColors = ['rgba(254, 219, 101,0.1)', 'rgba(0, 122, 254,0.1)', 'rgba(255, 75, 122, 0.1)'];

const option = {
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'none',
		},
		borderWidth: 0, //边框线宽
		padding: 0,
		backgroundColor: 'transparent',
		formatter: (p: any) => {
			let str = '';
			p.forEach((val: any) => {
				str += `
          <div class="year-item">
            <span class="year-dot" style="background-color: ${val.color};"></span>
            <span class="year-name">${val.seriesName}</span>
            <span class="year-value">${val.data >= 10000 ? (val.data / 10000).toFixed(2) + 'w' : val.data}</span>
          </div>
          `;
			});
			let dom = `
                    <div class="annual-tooTip">
                      <span class="annual-month">${p[0].dataIndex + 1}月</span>
                      <div class="annual-list">
                        ${str}
                      </div>
                    </div>
                  `;
			return dom;
		},
	},

	legend: {
		right: '2%',
		top: '0%',
		itemWidth: 15,
		itemHeight: 6,
		align: 'auto',
		icon: 'rect',
		itemGap: 15,
		textStyle: {
			color: '#ebebf0',
		},
	},
	grid: {
		top: '20%',
		left: '40',
		right: '4%',
		bottom: '15%',
		// containLabel: true
	},
	xAxis: [
		{
			name: '(月份)',
			type: 'category',
			boundaryGap: false,
			axisLine: {
				//坐标轴轴线相关设置。数学上的x轴
				show: true,
				lineStyle: {
					color: '#233653',
				},
			},
			axisLabel: {
				//坐标轴刻度标签的相关设置
				color: '#7ec7ff',
				padding: 0,
				fontSize: 12,
				formatter: function (data: string) {
					return data;
				},
			},
			splitLine: {
				show: false,
				lineStyle: {
					color: '#192a44',
				},
			},
			axisTick: {
				show: false,
			},
			data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
		},
	],
	yAxis: {
		name: '(人数)',
		nameTextStyle: {
			color: '#D6DFEA',
			fontSize: 12,
			padding: [0, 30, 0, 0],
		},
		// nameGap:18,
		minInterval: 1,
		// min: 4,
		splitNumber: 5,
		splitLine: {
			show: false,
			lineStyle: {
				color: '#192a44',
			},
		},
		axisLine: {
			show: true,
			lineStyle: {
				color: '#233653',
			},
		},
		axisLabel: {
			show: true,
			color: '#B9D6D6',
			padding: 0,
			formatter: function (value: any) {
				if (value >= 10000) {
					value = value / 10000 + 'w';
				}
				return value;
			},
		},
		axisTick: {
			show: false,
		},
	},
	series: annualData.map((val, index) => {
		return {
			name: val.label,
			type: 'line',
			symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
			showSymbol: false,
			smooth: true,
			lineStyle: {
				width: 1,
				color: colors[index], // 线条颜色
				borderColor: colors[index],
			},
			itemStyle: {
				color: colors[index],
				borderColor: '#646ace',
				borderWidth: 2,
			},
			tooltip: {
				show: true,
			},
			areaStyle: {
				//区域填充样式
				//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: colors[index], // 0% 处的颜色
						},
						{
							offset: 1,
							color: gradientColors[index], // 100% 处的颜色
						},
					],
					global: false, // 缺省为 false
				},
				shadowColor: 'rgba(25,163,223, 0.3)', //阴影颜色
				shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
			},
			data: val.value,
		};
	}),
};

onMounted(() => {
	const myEcharts = echarts.init(echartsRef.value as HTMLElement);
	myEcharts.setOption(option);
});
</script>
<style lang="scss" scoped>
.echarts {
	width: 100%;
	height: 100%;
}
:deep(.annual-tooTip) {
	box-sizing: border-box;
	width: 206px;
	height: 103px;
	padding: 5px 20px;
	background: url('../images/contrast-bg.png') no-repeat;
	background-size: 100% 100%;
	.annual-month {
		display: inline-block;
		margin-bottom: 2px;
		font-size: 10px;
		color: #03b8e2;
		transform: scale(0.9);
	}
	.annual-list {
		display: flex;
		flex-direction: column;
		width: 100%;
		.year-item {
			display: flex;
			align-items: center;
			width: 100%;
			height: 22px;
			.year-dot {
				width: 5px;
				height: 5px;
				margin: 0 2px;
				border-radius: 50%;
			}
			.year-name,
			.year-value {
				font-size: 10px;
				color: #03b8e2;
				transform: scale(0.8);
			}
			.year-name {
				margin: 0 2px;
			}
			.year-value {
				display: inline-block;
				width: 25%;
			}
		}
	}
}
</style>
